﻿<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>设备-水处理系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- jquery.jqplot -->
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="-1" />
    <link rel="stylesheet" type="text/css"
      href="jquery.jqplot/jquery.jqplot.min.css" />
    <link rel="stylesheet" type="text/css"
      href="jquery.jqplot/examples.min.css" />
    <link type="text/css" rel="stylesheet"
      href="jquery.jqplot/shCoreDefault.min.css" />
    <link type="text/css" rel="stylesheet"
      href="jquery.jqplot/shThemejqPlot.min.css" />
    <script type="text/javascript"
      src="js/jquery-1.9.1.min.js">
</script>
    <script type="text/javascript"
      src="jquery.jqplot/jquery.jqplot.min.js">
</script>
    <!--  <script type="text/javascript"
      src="jquery.jqplot/jquery.jqplot.js">
</script>-->
    <script type="text/javascript" src="jquery.jqplot/shCore.min.js">
</script>
    <script type="text/javascript"
      src="jquery.jqplot/shBrushJScript.min.js">
</script>
    <script type="text/javascript" src="jquery.jqplot/shBrushXml.min.js">
</script>
    <script type="text/javascript" src="jquery.jqplot/jqplot.json2.min.js">
</script>
    <script type="text/javascript" src="jquery.jqplot/example.min.js">
</script>
    <script type="text/javascript"
      src="jquery.jqplot/jqplot.logAxisRenderer.min.js">
</script>
    <script type="text/javascript"
      src="jquery.jqplot/jqplot.canvasTextRenderer.min.js">
</script>
    <script type="text/javascript"
      src="jquery.jqplot/jqplot.canvasAxisLabelRenderer.min.js">
</script>
    <script type="text/javascript"
      src="jquery.jqplot/jqplot.canvasAxisTickRenderer.min.js">
</script>
    <script type="text/javascript"
      src="jquery.jqplot/jqplot.dateAxisRenderer.min.js">
</script>
    <script type="text/javascript"
      src="jquery.jqplot/jqplot.categoryAxisRenderer.min.js">
</script>
    <script type="text/javascript"
      src="jquery.jqplot/jqplot.barRenderer.min.js">
</script>
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="jquery.jqplot/excanvas.min.js"></script><![endif]-->

    <!--jquery.jqplot end -->


<script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript">
var jsonurl = "searchTime";
function test(mark) {
  var ret = [];
  var ticks = [];
  $.ajax( {
    async : false,
    url : jsonurl,
    cache : false,
    dataType : "json",
    success : function(data) {
    ret[0] = data;
  }
  });
  $.ajax( {
    // have to use synchronous here, else the function 
    // will return before the data is fetched
    async : false,
    cache : false,
    data:{
                startime:$("#startime").val(),
                mark:mark,
                endtime:$("#endtime").val()
              },
    url : "getDate",
    dataType : "json",
    success : function(data) {
      ticks = data;
    }
  });

  plot2.data = ret;
  plot2.axes.xaxis.ticks = ticks;
  plot2.options.axes = {
  //show: true,
    xaxis : {
      padMin : 0,
      numberTicks : 12,
      
      ticks : this.plot2.axes.xaxis.ticks,
      tickRenderer : $.jqplot.CanvasAxisTickRenderer,
      tickOptions : {
        formatString : "%#'dh",
        angle : 40
      },
        padMax : 1
    },
       yaxis : {
        tickOptions : {
          formatString : "%#.2f"
        }
      }

  };
  plot2.replot(plot2.options);
}
var plot2;
$(document).ready(function() {
  var ajaxDataRenderer = function(url, plot, options) {
    var ret = [];
    $.ajax( {
      async : false,
      url : jsonurl,
      dataType : "json",
      cache : false,
      success : function(data) {
        ret[0] = data;
      }
    });
    return ret;
  };
  function getX() {
    var ret = null;
    var now = new Date();
    strYear = now.getFullYear();
    strDay = now.getDate();
    startMonth=now.getMonth();
    if(startMonth<10){
      startMonth="0"+startMonth;
    }
    strMonth = now.getMonth()+1;
    var date=strYear;
    if(strMonth<10){
      date+="-0"+strMonth;
    }else{
      date+="-"+strMonth;
    }
    if(strDay<10){
      date+="-0"+strDay;
    }else{
      date+="-"+strDay;
    }
    var now1 = new Date();
    var s = now1.setDate(now1.getDate() - 30);
    var d = new Date(s);
    strYear1 = d.getFullYear();
    strDay1 = d.getDate();
    startMonth1=d .getMonth();
    if(startMonth1<10){
      startMonth1="0"+startMonth1;
    }
    strMonth1 = d.getMonth()+1;
    var date1=strYear1;
    if(strMonth1<10){
      date1+="-0"+strMonth1;
    }else{
      date1+="-"+strMonth1;
    }
    if(strDay1<10){
      date1+="-0"+strDay1;
    }else{
      date1+="-"+strDay1;
    }
    $.ajax( {
      async : false,
      url : "getDate",
      data:{
                startime:date1,
                endtime:date
              },
      dataType : "json",
      success : function(data) {
        ret = data;
        //console.log(ret);
    }
    });
    //console.log(ret);
    return ret;
  }
  ;
  plot2 = $.jqplot('chartdiv', jsonurl, {
    //plot2 = $.jqplot('chartdiv', [ jsonurl, jsonurl2 ], {

    dataRenderer : ajaxDataRenderer,
    //axisDefaults: {  
        //show: true
        //},
    axes : {
      xaxis : {
        //min:"0",
        //max:"24",
        //show: true,
        padMin : 0,
        numberTicks : 12,
        ticks : getX(),
        tickRenderer : $.jqplot.CanvasAxisTickRenderer,
        tickOptions : {
          formatString : "%#'dh",
          angle : 40
        },
        padMax : 1
      },
       yaxis : {
        tickOptions : {
          formatString : "%#.2f"
        }
      }
    },
    dataRendererOptions : {
      unusedOptionalUrl : jsonurl
    }

  });
});
</script>

</head>

<body>
<div class="main">
  <jsp:include page="conter/header.jsp"></jsp:include>
  <div class="certen">
   <jsp:include page="conter/deviceLeft.jsp"></jsp:include>
  <div class="content">
  <div class="mainbar">
  
      <div class="runbutton">
          <h2><span><a href="runDeviceAction?deviceId=${deviceId}">运行数据</a></span> <span style="color: #fff; margin-left: 15px;">历史数据</span></h2><div class="clr"></div>
          </div>
          <div class="devicrname">
						<h2>
						<span style="margin-left:18px;">${deviceName}</span>&minus;&minus;&minus;
						<span>${place}</span>
						</h2>
					
					</div>
					
          	<div class="hischick">
				<form action="" method="post"  >
					<ol><li>
            			<label style="font-size: 20px;margin-bottom: 40px;margin-top: -20px;">时间段查询：</label>
            			<img src="images/time.gif" width="60"  height="60" style="float: left;margin-left: 25px;margin-top: -30px;"/>
            			<span style="margin-left: 66px;">从<input id="startime" name="startime" class="Wdate" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'endtime\')||\'%y-%M-{%d-1}\'}'})" class="Wdate" style="width:198px" />到
						<input id="endtime" name="endtime" class="Wdate" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'startime\')}',maxDate:'#F{$dp.$D(\'startime\',{d:30})||\'%y-%M-{%d-1}\'}'})"" style="width:198px" /></span>
          		</li><li style="margin-left: 300px;margin-top: 15px;">
          		<input type="button" value="查询" name="imageField" id="checktime" class="send" onclick="test(0);test(0);check();"/>
           			 <input type="reset"  class="send1" />
           		 <div class="clr"></div>
         		 </li></ol>
				</form>
			</div>
			
	<div class="h_button">
				<input type="button" value="PH值曲线" onclick="test(0);phvalue();test(0);phvalue();" id="ph"/>
				<input type="button" value="ORP曲线" onclick="test(1);orpcurve();test(1);orpcurve();" id="orp"/>
				<input type="button" value="温度曲线" onclick="test(2);tempera();test(2);tempera();" id="wend"/>
				<input type="button" value="电导率曲线" onclick="test(3);conductivity();test(3);conductivity();" id="ddl"/>
			</div>
			<div class="curve">
							<span id="conductivity" style="display:none">电导率曲线图</span>
							<span id="phvalue" style="display:block">PH值曲线图</span>
							<span id="orpcurve" style="display:none">ORP曲线图</span>
							<span id="tempera" style="display:none">温度曲线图</span>
						</div>
			<div id="chartdiv" style="height: 400px; width: 832px; position: relative;"></div>
      </div>
  
    <div class="clr"></div>
  </div>

  <script src="js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
  <div class="fbg">
    <div class="fbg_resize">    
  
  <jsp:include page="conter/slide.jsp"></jsp:include>
  </div> 
  </div>
  <jsp:include page="conter/footer.jsp"></jsp:include>
</div>

<script type="text/javascript">
function check(){
	var x=document.getElementById("startime").value;
	var x1=document.getElementById("endtime").value;
	if(x==""|| x1==""){
		alert("请选择时间");
		document.getElementById("ph").disabled=true;
		document.getElementById("orp").disabled=true;
		document.getElementById("wend").disabled=true;
		document.getElementById("ddl").disabled=true;
	}else{
		document.getElementById("checktime").disabled=false;
		document.getElementById("ph").disabled=false;
		document.getElementById("orp").disabled=false;
		document.getElementById("wend").disabled=false;
		document.getElementById("ddl").disabled=false;
	}
	
	};
	
	function conductivity(){
document.getElementById("conductivity").style.display="block";
document.getElementById("phvalue").style.display="none";
document.getElementById("orpcurve").style.display="none";
document.getElementById("tempera").style.display="none";
}
function phvalue(){ 
document.getElementById("conductivity").style.display="none";  
document.getElementById("phvalue").style.display="block";
document.getElementById("orpcurve").style.display="none";
document.getElementById("tempera").style.display="none";
}
function orpcurve(){ 
document.getElementById("conductivity").style.display="none";  
document.getElementById("phvalue").style.display="none";
document.getElementById("orpcurve").style.display="block";
document.getElementById("tempera").style.display="none";
}
function tempera(){ 
document.getElementById("conductivity").style.display="none";  
document.getElementById("phvalue").style.display="none";
document.getElementById("orpcurve").style.display="none";
document.getElementById("tempera").style.display="block";
}
</script>
</body>
</html>